<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>AprilTag配置</title>
</head>

<body>
	<h2>使用camera_calibrater插件完成标定后，才能使用本插件</h2>
	<div>
		tag_family<br>
		<select id="tag_family">
			<option value="tag16h5">tag16h5</option>
			<option value="tag25h9">tag25h9</option>
			<option value="tag36h11" selected>tag36h11</option>
		</select>
		<br>
		tag_size(单位m)<br>
		<input type="text" id="tag_size">
		<br>
		<span>
			<input type="radio" name="apriltag_ctl" id="signal" value="signal" onclick="switchTab('signal')" checked />
			<label for="signal">使用信号量读取标签位置</label>
		</span>
		<span>
			<input type="radio" name="apriltag_ctl" id="modbus" value="modbus" onclick="switchTab('modbus')" />
			<label for="modbus">使用Modbus读取标签位置</label>
		</span>
		<br/>
		<div id="tab_signal">
			signal<br>
			<input type="text" id="signal_id">
			<br>
		</div>
		<div id="tab_modbus" style="display: none;">
			modbus_address<br>
			<input type="text" id="modbus_address">
			<br>
			modbus_salve_id<br>
			<input type="text" id="modbus_id">
			<br>
		</div>
		<hr>
	</div>
	<button onclick="save()">保存参数</button>
	<button onclick="get()">刷新参数</button>
	<br>
	<hr>
	<br>
	<button onclick="find_tag()">识别</button>
	<br>
	<textarea id="tags" rows="6" disabled style="width:80%;"></textarea>
	<br>
	<img src="" id="pic">
</body>

<script>
	function switchTab(tab) {
		if (tab == "modbus") {
			document.getElementById("tab_signal").style.display = "none";
			document.getElementById("tab_modbus").style.display = "inline";
		} else {
			document.getElementById("tab_signal").style.display = "inline";
			document.getElementById("tab_modbus").style.display = "none";
		}
	}
	var ws;
	var rpc_data = {
		"jsonrpc": "2.0",
		"method": "",
		"params": [],
		"id": 2
	};
	function save() {
		rpc_data.id = 10;
		rpc_data.method = "set_item";
		rpc_data.params[0] = {
			"key": "plugin_apriltag_tag_family",
			"value": document.getElementById("tag_family").value
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.params[0] = {
			"key": "plugin_apriltag_tag_size",
			"value": document.getElementById("tag_size").value
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.params[0] = {
			"key": "plugin_apriltag_signal",
			"value": document.getElementById("signal_id").value
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.params[0] = {
			"key": "plugin_apriltag_modbus_address",
			"value": document.getElementById("modbus_address").value
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.params[0] = {
			"key": "plugin_apriltag_modbus_id",
			"value": document.getElementById("modbus_id").value
		};
		ws.send(JSON.stringify(rpc_data));
	}
	function find_tag() {
		rpc_data.id = 1;
		rpc_data.method = "set_signal";
		rpc_data.params[0] = {
			"key": Number(document.getElementById("signal_id").value),
			"value": 1
		};
		ws.send(JSON.stringify(rpc_data));
		setTimeout(
			() => {
				rpc_data.method = "get_item";
				rpc_data.id = 60;
				rpc_data.params[0] = {
					"key": "plugin_apriltag_tags",
				};
				ws.send(JSON.stringify(rpc_data));

			}, 5000
		)
	}
	function get() {
		rpc_data.method = "get_item";
		rpc_data.id = 41;
		rpc_data.params[0] = {
			"key": "plugin_apriltag_tag_family",
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.id = 42;
		rpc_data.params[0] = {
			"key": "plugin_apriltag_tag_size",
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.id = 51;
		rpc_data.params[0] = {
			"key": "plugin_apriltag_signal",
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.id = 55;
		rpc_data.params[0] = {
			"key": "plugin_apriltag_modbus_address",
		};
		ws.send(JSON.stringify(rpc_data));
		rpc_data.id = 56;
		rpc_data.params[0] = {
			"key": "plugin_apriltag_modbus_id",
		};
		ws.send(JSON.stringify(rpc_data));
	}

	function connect() {
		ws = new WebSocket("ws://" + window.location.hostname + ":3030");

		ws.onopen = () => {
			console.log("open ws");
			get();
		};
		ws.onmessage = (data) => {
			var msg = JSON.parse(data.data);
			if (msg.error) {
				console.log(msg.error);
			} else {
				var id = msg.id;
				var value = msg.result.value;
				if (value === undefined) {
					return;
				}
				if (id == 41) {
					document.getElementById("tag_family").value = value || "tag36h11";
				}
				if (id == 42) {
					document.getElementById("tag_size").value = value || "0.04";
				}
				if (id == 51) {
					document.getElementById("signal_id").value = value || "13";
				}
				if (id == 55) {
					document.getElementById("modbus_address").value = value || "";
				}
				if (id == 56) {
					document.getElementById("modbus_id").value = value || "7";
				}
				if (id == 60) {
					document.getElementById("tags").value = value || "";
				}
			}
		}
	}
	connect();

	setInterval(() => {
		if (ws.readyState == ws.CLOSED) {
			connect();
		}
	}, 1000);
	setInterval(() => {
		document.getElementById("pic").src = "../../camera/images/apriltag.jpg?" + Date.now()
	}, 5000);
</script>

</html>
